import React, { Component, PropTypes } from 'react';

import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as CurrentTableActions from '../../../../actions/currentTable';

const propTypes = {
  children: PropTypes.array.isRequired,
  columnName: PropTypes.string.isRequired,
  removeColumn: PropTypes.func.isRequired,
  undoRemoveColumn: PropTypes.func.isRequired,
  tableName: PropTypes.string,
  adding: PropTypes.bool
};

class StructureRow extends Component {
  constructor(props) {
    super(props);
    this.state = {
      rowClass: 'structure-row',
      isRemoving: false
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.structureEdited.length === 0) {
      this.setState({
        rowClass: 'structure-row',
        isRemoving: false
      });
    }
  }

  handleRemoveClick = () => {
    this.setState({
      rowClass: 'structure-row structure-row--removing',
      isRemoving: true
    });
    this.props.removeColumn(this.props.columnName);
  }

  handleUndoClick = () => {
    this.setState({
      rowClass: 'structure-row',
      isRemoving: false
    });
    this.props.undoRemoveColumn(
      this.props.columnName,
      this.props.tableName
    );
  }

  render() {
    /* eslint-disable max-len*/
    return (
      <tr
        className={this.state.rowClass}
        style={{ position: 'relative' }}
      >
        {this.props.children}
        <td style={{ textAlign: 'center' }}>
          {!this.state.isRemoving ?
            !this.props.adding && <img role="presentation" className="icon icon-minus structure-row__icon" src="" width="25" height="25" onClick={this.handleRemoveClick} /> :
              <img role="presentation" className="icon icons8-Cancel-2-Filledi structure-row__icon" src="" width="25" height="25" onClick={this.handleUndoClick} />}
        </td>
      </tr >
    );
    /* eslint-enable */
  }
}

StructureRow.propTypes = propTypes;

function mapStateToProps(state) {
  return {
    tableName: state.currentTable.tableName,
    structureEdited: state.currentTable.structureEdited
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ ...CurrentTableActions }, dispatch);
}


export default connect(mapStateToProps, mapDispatchToProps)(StructureRow);
